使用响应式设计
注意
在 CODESYS Visualization 版本 4.7.0.0 及更高版本，您可以设计响应式可视化。
响应式设计可自动适应显示变体的大小和布局。无论设备是台式机、笔记本电脑、平板电脑、面板还是智能手机，都会考虑相应设备的规格，并调整可视化的大小和布局。
为了向可视化用户提供这一便捷功能，您需要根据客户端大小配置显示变体和可视化元素。这与 Web 可视化相关，因为此处的客户端大小不同。但是，该功能可以以相同的方式用于目标可视化。
响应式设计特别适合网页可视化，但目标可视化或集成可视化也需要进行配置设置。
在可视化管理器下，打开 网页可视化 目的。
指定缩放类型。
选择 固定的 缩放选项。
并选择 使用自动检测的客户端大小 选项。
随着 固定的 缩放类型，可视化对象（主页）的内容不按比例显示。显示大小自动确定。
这
Container变量在项目中被识别。现在，您可以按照如下所述配置可视化元素，以确保它们根据客户端的显示、移动或调整大小。
或者选择其中一个缩放选项， 各向同性 或者 各向异性。
在设备树中，打开可视化管理器。
这 响应式可视化尺寸 选项位于 设置 选项卡中的 其他设置 团体。
选择该选项。
整个应用程序中激活了“响应式可视化”功能。
随着 各向同性 和 各向异性 缩放类型，主页的全部内容将缩放至客户端提供的显示尺寸。客户端尺寸会自动检测。
现在，您可以按照如下所述配置可视化元素，以确保它们根据客户端的定位或调整大小进行显示。
访问客户机规模
要访问当前可视化的大小，变量 Visu.Width 和 Visu.Height 可以插入表达式中。要访问当前容器的大小，变量 Container.Width 和 Container.Height 可以插入表达式中。
为了在深度结构化的可视化中确定客户的总规模，变量 VisuElems.CurrentClient.Width 和 VisuElems.CurrentClient.Height 可以插入表达式中。然后，您可以在可视化元素的属性中指定这些表达式。
这使得在深度结构化的可视化中访问客户的总规模成为可能。例如，您可以决定纵向或横向格式。
有关更多信息，请参阅： 优化调整位置和大小
使用“固定”缩放类型
随着 固定的 缩放类型，则可视化内容将不按比例显示。但是，如果按照如下所述进行配置，元素将根据客户端移动或调整大小。
为此，请按如下方式配置：
绝对运动， 移动， X：
Container.Width - Visu.Width
这可以通过以下方式实现 趋势， 痕迹 或者 笛卡尔 XY 图表 元素。
为此，请按如下方式配置：
相对运动， 右下角移动， X：
Container.Width - Visu.Width相对运动， 右下角移动， Y：
Container.Height- Visu.Height
为此，请按如下方式配置：
绝对运动， 移动， X：
SEL(IsPortrait(Container), 0, -250)绝对运动， 移动， Y：
SEL(IsPortrait(Container), 0, 150)
这 无形的 element 属性使得能够针对不同的客户端尺寸显示许多不同的元素。
为此，请按如下方式配置：
状态变量， 无形的：
IsPortrait(Container)
使用“各向同性”或“各向异性”缩放类型
使用“各向同性”和“各向异性”缩放类型，主页的全部内容将缩放到客户端提供的显示大小。例如，如果平板电脑的页面方向从横向旋转为纵向，则内容与纵横比不匹配。会产生较大的条形图，无法最佳地填充页面。
为了避免这种情况，以前需要为每种纵向和横向格式创建一个单独的页面（可视化）。这些是通过 ClientListener 使用正确的起始页。现在可以通过响应式调整大小更轻松地实现这一点，而无需复制可视化对象。
通过从横向到纵向格式的响应式调整大小，较右侧的图块将通过绝对移动移至右下角。当前页面大小会动态适应当前客户端大小，元素将在其中处于最佳位置。从纵向格式更改为横向格式时，元素将朝相反方向移动。
可视化主页由多个使用框架元素编程的“图块”组成。如果可视化的方向发生变化，则必须重新定位和移动这些框架元素，并使其适应当前显示大小。
配置如下：
财产： 绝对运动， 移动， X：
SEL(IsPortrait(Container), 0, -250)财产： 绝对运动， 移动， Y：
SEL(IsPortrait(Container), 0, 150)
实施 IsPortrait 用于确定可视化大小
FUNCTION IsPortrait : BOOL
VAR_INPUT sizeProvider : VisuElems.ISizeProvider;
END_VAR
IF sizeProvider.Width < sizeProvider.Height THEN
IsPortrait := TRUE;
END_IF使用典型表达式计算 X 和 Y 方向的运动 绝对运动 财产：
